<template>
  <div>
    <div><h1 class="userTitle">{{ newArticle }}</h1></div>
    <div>
      <a-row type="flex" justify="space-around" align="middle">
        <a-col :span="24" style="height:80px"></a-col>
      </a-row>
      <a-row type="flex" justify="space-around" align="middle">
        <a-col :span="24" style="height:200px">
          <a-row type="flex" justify="space-around" align="middle">
            <a-col :span="1" style="height:100px"></a-col>
            <a-col :span="21" style="height:100px">
              <a-row type="flex" justify="space-around" align="middle">
                <a-col :span="9" style="height:100px">
                  <span class="articleStyle">文章标题：</span>
                  <a-input
                    type="text"
                    class="titleInput"
                    placeholder="请输入标题"
                    style="font-weight:bold"
                    v-model="articleTitle"
                  ></a-input>
                </a-col>
                <a-col :span="8" style="height:100px" v-if="flag">
                  <span class="articleStyle">文章标签：</span>
                  <a-select
                    labelInValue
                    placeholder="请选择"
                    style="width:250px;font-weight:bold"
                    @change="selectHandleChange1"
                  >
                    <a-select-option value="思想建设">思想建设</a-select-option>
                    <a-select-option value="工作动态">工作动态</a-select-option>
                    <a-select-option value="学习资料">学习资料</a-select-option>
                    <a-select-option value="支部概况">支部概况</a-select-option>
                  </a-select>
                </a-col>
                <a-col :span="7" style="height:100px">
                  <a-col :span="1" style="height:100px"></a-col>
                  <a-col :span="23" style="height:100px" v-if="flag">
                    <span class="articleStyle">文章类型：</span>
                    <a-select
                      labelInValue
                      placeholder="请选择"
                      style="width:250px;font-weight:bold"
                      @change="selectHandleChange2"
                    >
                      <a-select-option value="纯文本">纯文本</a-select-option>
                      <a-select-option value="带插图">带插图</a-select-option>
                    </a-select>
                  </a-col>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="1" style="height:100px"></a-col>
          </a-row>
          <a-row type="flex" justify="space-around" align="middle">
            <a-col :span="9" style="height:100px"></a-col>
            <a-col :span="10" style="height:100px" v-if="flag">
              <span style="font-size:x-large">是否附带封面？</span>
              <a-select
                labelInValue
                placeholder="请选择"
                style="width:250px;font-weight:bold"
                @change="selectHandleChange3"
              >
                <a-select-option value="是">是</a-select-option>
                <a-select-option value="否">否</a-select-option>
              </a-select>
              <a-upload
                :fileList="fileList"
                :remove="handleRemove"
                :beforeUpload="beforeUpload"
                v-if="this.articleCover=='是'"
              >
                <a-button>
                  <a-icon type="upload"/><span style="font-weight:bold">点击选择图片</span>
                </a-button>
              </a-upload>
            </a-col>
            <a-col :span="5" style="height:100px"></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row type="flex" justify="space-around" align="middle">
        <a-col :span="24" style="height:800px">
          <a-row type="flex">
            <a-col :span="24" style="height:600px">
              <a-row type="flex">
                <a-col :span="1" style="height:600px"></a-col>
                <a-col :span="23" style="height:600px">
                  <!-- 编辑器 -->
                  <span class="articleStyle">文章内容：</span>
                  <div ref="editor" style="text-align:left">
                    <span>{{ content }}</span>
                  </div><br>
                  <a-col :span="24" style="height:50px">
                    <a-row type="flex">
                      <a-col :span="11" style="height:50px"></a-col>
                      <a-col :span="2" style="height:50px">
                        <a-button class="btn" type="primary" size="large" @click="addCover" v-if="this.articleCover==''">发布文章</a-button>
                        <a-button class="btn" type="primary" size="large" @click="addArticleWithCover" v-if="this.articleCover=='是'">发布文章</a-button>
                        <a-button class="btn" type="primary" size="large" @click="addArticleWithoutCover" v-if="this.articleCover=='否'">发布文章</a-button>
                        <a-button class="btn" type="primary" size="large" @click="updateArticle" v-if="this.articleCover=='更新'">发布更新</a-button>
                      </a-col>
                      <a-col :span="11" style="height:50px"></a-col>
                    </a-row>
                  </a-col>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import E from 'wangeditor'
import { createWithCover, createWithoutCover, editByArticleId } from '@/api/file'
// var querystring = require('querystring')
export default {
  name: 'ArticleNew',
  data () {
    return {
      articleTitle: '',
      articleId: '',
      articleType: '',
      articleTag: '',
      articleCover: '',
      fileList: [],
      editorContent: '',
      content: '',
      flag: '',
      newArticle: '创建文章'
    }
  },
  created () {
    var self = this
    this.flag = this.$route.query.articleCover !== '更新'
    if (this.$route.query.articleId !== undefined) {
      this.articleId = this.$route.query.articleId
      this.flag = false
      this.newArticle = '修改文章'
      this.axios.get('/api/findByArticleId', {
        params: {
          articleId: this.$route.query.articleId
        }
      }).then((res) => {
        if (res.status) {
          var datafromlist = JSON.parse(res.data)
          this.articleTitle = datafromlist.articleTitle
          this.articleCover = this.$route.query.articleCover
          this.axios.get('/api/getArticleContent', {
            params: {
              articleId: this.$route.query.articleId
            }
          }).then((res) => {
            self.content = res.data.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,
              '').replace(/<[^>]+?>/g, '').replace(/\s+/g, ' ').replace(/ /g, ' ').replace(/>/g, ' ').replace(/&nbsp;/g, ' ')
          })
        }
      })
    }
  },
  methods: {
    selectHandleChange1 (value) {
      this.articleTag = value.key
    },
    selectHandleChange2 (value) {
      this.articleType = value.key
    },
    selectHandleChange3 (value) {
      this.articleCover = value.key
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      return false
    },
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    addArticleWithCover () {
      var params = {
        'articleTitle': this.articleTitle,
        'articleTag': this.articleTag,
        'articleType': this.articleType,
        'img': this.fileList[0],
        'content': this.editorContent
      }
      // var image = querystring.stringify(params.img)
      var image = this.fileList
      if (params.articleTitle === '' || params.articleTag === '' || params.articleType === '') {
        this.$message.info('请完善信息!')
      } else if (image.length === 0) {
        this.$message.info('封面图片不能为空!')
      } else if (image.length > 1) {
        this.$message.info('请刷新页面重新选择图片!')
      } else if (params.content === '') {
        this.$message.info('文章内容不能为空!')
      } else if (params.articleType === '纯文本') {
        var str1 = params.content
        if (str1.indexOf('<img') === -1) {
          createWithCover(params).then((res) => {
            if (res.status) {
              this.$message.success('创建成功!')
            } else {
              this.$message.info('文章已存在!')
            }
          })
        } else {
          this.$message.info('请确认文章内容与文章类型的一致性!')
        }
      } else if (params.articleType === '带插图') {
        var str2 = params.content
        if (str2.indexOf('<img') !== -1) {
          createWithCover(params).then((res) => {
            if (res.status) {
              this.$message.success('创建成功!')
            } else {
              this.$message.info('文章已存在!')
            }
          })
        } else {
          this.$message.info('请确认文章内容与文章类型的一致性!')
        }
      }
    },
    addArticleWithoutCover () {
      var params = {
        'articleTitle': this.articleTitle,
        'articleTag': this.articleTag,
        'articleType': this.articleType,
        'content': this.editorContent
      }
      if (params.articleTitle === '' || params.articleTag === '' || params.articleType === '') {
        this.$message.info('请完善信息!')
      } else if (params.content === '') {
        this.$message.info('文章内容不能为空!')
      } else if (params.articleType === '纯文本') {
        var str3 = params.content
        if (str3.indexOf('<img') === -1) {
          createWithoutCover(params).then((res) => {
            if (res.status) {
              this.$message.success('创建成功!')
            } else {
              this.$message.info('文章已存在!')
            }
          })
        } else {
          this.$message.info('请确认文章内容与文章类型的一致性!')
        }
      } else if (params.articleType === '带插图') {
        var str4 = params.content
        if (str4.indexOf('<img') !== -1) {
          createWithoutCover(params).then((res) => {
            if (res.status) {
              this.$message.success('创建成功!')
            } else {
              this.$message.info('文章已存在!')
            }
          })
        } else {
          this.$message.info('请确认文章内容与文章类型的一致性!')
        }
      }
    },
    addCover () {
      if (this.articleCover === '') {
        this.$message.info('请选择是否附带封面!')
      }
    },
    updateArticle () {
      var params = {
        'articleId': this.$route.query.articleId,
        'articleTitle': this.articleTitle,
        'content': this.editorContent
      }
      if (params.articleId === undefined) {
        params.articleId = this.articleId
      }
      editByArticleId(params).then((res) => {
        if (res.status) {
          this.$message.info('更新成功!')
        }
      })
    },
    handleChange (info) {
      this.fileList = [...info.fileList]
    }
  },
  mounted () {
    var editor = new E(this.$refs.editor)
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
      console.log(this.editorContent)
    }
    editor.customConfig.uploadImgShowBase64 = true
    editor.customConfig.showLinkImg = false
    editor.create()
  }
}
</script>

<style>
.articleStyle{
  font-size: x-large;
}
.titleInput{
  width: 300px;
  height: 40px;
}
.userTitle{
  text-align: center;
  font-weight: bold;
}
</style>
